<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="../common/echarts.min.js"></script>
        <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
        <link rel="stylesheet" href="../common/index.css">
        <title>巷道出入库任务队列看板</title>
        <script type="text/javascript">
            var myBarEcharts =null;
            window.onload=function(){
                // 获取巷道
                var data=[];
                var roadwayNumber=Math.floor(Math.random() * 10) + 1;
                for (var i = 0; i < roadwayNumber; i++) {
                    data.push({
                        roadway:'巷道'+(i+1),
                        storage:Math.floor(Math.random() * 1000) + 1,
                        outbound:Math.floor(Math.random() * 1000) + 1,
                        movingInventory:Math.floor(Math.random() * 1000) + 1
                    })
                }
                myBar(data);
                tableScroll(data);
                setInterval(function(){
                    data=[];
                    for (var i = 0; i < roadwayNumber; i++) {
                        data.push({
                        roadway:'巷道'+(i+1),
                        storage:Math.floor(Math.random() * 1000) + 1,
                        outbound:Math.floor(Math.random() * 1000) + 1,
                        movingInventory:Math.floor(Math.random() * 1000) + 1
                    })
                    }
                    updateMyBar(data);
                    updateMyTable(data);
                },10000);
            }
            function myBar(data){
                myBarEcharts = echarts.init(document.getElementById('myBar'));
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                    },
                    legend: {
                        left: '10%',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '4%',
                        containLabel: true
                    },
                    xAxis:{
                        type: 'category',
                        data: data.map(item=>item.roadway),
                        axisLine:{
                            show:false,
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            show:true,
                            color:'#fff',
                            fontSize:12,
                        }
                    },
                    yAxis: {
                        show:false
                    },
                    series: [
                        {
                            name: '入库',
                            type: 'bar',
                            stack: 'Ad',
                            barWidth: 40,
                            emphasis: {
                                focus: 'series'
                            },
                            label: {
                                show: true,
                                formatter: '{c}',
                                color:'#000'
                            },
                            data: data.map(item=>item.storage)
                        },
                        {
                            name: '出库',
                            type: 'bar',
                            stack: 'Ad',
                            barWidth: 40,
                            emphasis: {
                                focus: 'series'
                            },
                            label: {
                                show: true,
                                formatter: '{c}',
                                color:'#000'
                            },
                            data:data.map(item=>item.outbound)
                        },
                        {
                            name: '移库',
                            type: 'bar',
                            barWidth: 40,
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            label: {
                                show: true,
                                formatter: '{c}',
                                color:'#000'
                            },
                            data:data.map(item=>item.movingInventory)
                        }
                    ]
                };
                myBarEcharts.setOption(option);
            }
            function updateMyBar(data){
                myBarEcharts.setOption({
                    series: [
                        {
                            data: data.map(item=>item.storage)
                        },
                        {
                            data: data.map(item=>item.outbound)
                        },
                        {
                            data: data.map(item=>item.movingInventory)
                        }
                    ]
                })
            }
            //滚动表格
            function tableScroll(data) {
                let processList = data;
                let processHtml = '<ul class="list">';
                var row=0;
                processList.forEach(element => {
                    processHtml += ('<li class="item">'+
                        '<span style="width:25%" class="roadway'+row+'">' + element.roadway + '</span>'+
                        '<span style="width:25%" class="storage'+row+'">' + element.storage + '</span>'+
                        '<span style="width:25%" class="outbound'+row+'">' + element.outbound + '</span> ' +
                        '<span style="width:25%" class="movingInventory'+row+'">' + element.movingInventory + '</span>');
                        row++;
                });
                $(".process-td").append(processHtml += "</ul>");
                var html = $(".process-td ul").html();


                var containerHeight = $(".process-td").height();
                var itemHeight = $(".process-td li").outerHeight(true);
                if (processList.length > Math.round(containerHeight / itemHeight)) {
                    $(".process-td ul").append(html);
                    var ls = $(".process-td li").length / 2;
                    a = 0
                    ref = setInterval(function () {
                        a++
                        if (a == ls) {
                            a = 1
                            $(".process-td ul").css({ marginTop: 0 })
                            $(".process-td ul").animate({ marginTop: -'2.28' * a + 'vw' }, 1000)
                        }
                        $(".process-td ul").animate({ marginTop: -'2.28' * a + 'vw' }, 1000)
                    }, 2500);
                }
            }
            function updateMyTable(data){
                for (let i = 0; i < data.length; i++) {
                    const element = data[i];
                    $(".roadway"+i).html(element.roadway);
                    $(".storage"+i).html(element.storage);
                    $(".outbound"+i).html(element.storage);
                    $(".movingInventory"+i).html(element.storage);
                }
            }
        </script>
        <style>
            .title{
                color: #68d8fe;
                display: flex;
                justify-content: center;
                font-size: 3vw;
                padding-top: 1vw;
            }
            .echart{
                display: flex;
                align-items: center;
                height: 81%;
                margin-top: 5vw;
                
            }
            #myBar{
                width: 60%;
                height: 100%;
            }
            #myTable{
                width: 40%;
                height: 100%;
            }
            .process-td{
                background-color:transparent;
            }
            .header-td{
                width: 100%;
                font-size: 1.1vw;
                color: #68d8fe;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
                position: relative;
            }
            .item{
                margin: 1vw 0;
            }
        </style>
        <div class="main">
            <div class="title">巷道出入库任务队列看板</div>
            <div class="echart">
                <div id="myBar"></div>
                <div id="myTable">
                    <div class="header-td">
                        <ul class="list">
                            <li class="item" style="display: flex;justify-content: space-between;align-items: center;">
                                <span style="width:25%;display: inline-block;text-align: center;">巷道</span>
                                <span style="width:25%;display: inline-block;text-align: center;">入库</span>
                                <span style="width:25%;display: inline-block;text-align: center;">出库</span>
                                <span style="width:25%;display: inline-block;text-align: center;">移库</span>
                            </li>
                        </ul>
                    </div>
                    <div id="myPie"></div>
                </div>
            </div>
        </div>
    </body>
</html>